import { Icon, NavBar, Toast } from 'antd-mobile';
import { history, Link } from 'umi';
import styles from './about.less';

export default function AboutPage() {
  function navBarGoBack() {
    history.goBack();
  }

  function handleCheckVersion() {
    Toast.info('已经是最新版本', 2);
  }

  return (
    <>
      <div className="page" style={{ backgroundColor: '#ffffff' }}>
        <div className="page__navbar">
          <NavBar
            style={{ color: '#000000' }}
            mode="light"
            icon={<Icon type="left" />}
            leftContent="关于"
            onLeftClick={() => navBarGoBack()}
            // rightContent={[
            //     <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
            //     <Icon key="1" type="ellipsis" />,
            // ]}
          >
            {/* JSAPI支付 */}
          </NavBar>
        </div>

        <div className={styles['logo-container']}>
          <img src={require('@/images/logo.png')} />
          <span>订阅号助手</span>
        </div>

        <div className={styles.version}>Version 0.0.1</div>

        <div className={styles.cells}>
          <div className={styles.cell}>
            <div className={styles['cell__bd']}>运营中心</div>
            <div className={styles['cell__ft']}></div>
          </div>
          <div
            className={styles.cell}
            onClick={() => history.push('/setting/feedback')}
          >
            <div className={styles['cell__bd']}>意见反馈</div>
            <div className={styles['cell__ft']}></div>
          </div>
          <div className={styles.cell} onClick={handleCheckVersion}>
            <div className={styles['cell__bd']}>检查更新</div>
            <div className={styles['cell__ft']}></div>
          </div>
        </div>

        <div style={{ height: '80px' }}></div>
        <div className="weui-footer">
          <div className="weui-footer__links">
            <Link to="/wxpay-native" className="weui-footer__link">
              Native支付
            </Link>
            <Link to="/wxpay-h5" className="weui-footer__link">
              H5支付
            </Link>
          </div>
          <div className="weui-footer__links">
            <a className="weui-footer__link">《微信公众平台服务协议》</a>和
            <a className="weui-footer__link">《隐私保护指引》</a>
          </div>
          <div style={{ height: '20px' }}></div>
          <div className="weui-footer__text">腾讯公司版权所有</div>
          <div className="weui-footer__text">
            Copyright◎2018- 2020 Tencent.All Rights Reserved
          </div>
        </div>
      </div>
    </>
  );
}
